<!-- 画心代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" style="height: 500px;width: 500px; background-color: black;"></canvas>
</body>
<script>
    var settings = {
        particles: {
            // 最大粒子数量  
            length: 500,
            // 粒子持续时间（秒）  
            duration: 2,
            // 粒子速度（像素/秒）  
            velocity: 100,
            // 效果系数（-1至1之间，值越高效果越强烈） 粒子加速度设置  
            effect: -0.75,
            // 粒子大小（像素）  
            size: 30
        }
    };
    var Point = (function () {
        // 构造函数，初始化坐标值
        function Point(x, y) {
            this.x = typeof x !== "undefined" ? x : 0;
            this.y = typeof y !== "undefined" ? y : 0;
        }
        // 用于创建新的point对象
        Point.prototype.clone = function () {
            return new Point(this.x, this.y);
        };

        // 计算长度，勾股定理
        Point.prototype.length = function (length) {
            if (typeof length == "undefined")
                return Math.sqrt(this.x * this.x + this.y * this.y);
            // 将当前点缩放到给定的长度  
            this.normalize();
            this.x *= length;
            this.y *= length;
            return this;
        };
        // 获取原始长度
        Point.prototype.normalize = function () {
            var length = this.length();
            this.x /= length;
            this.y /= length;
            return this;
        };
        return Point;
    })();

    var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d");
    canvas.width = 200;
    canvas.height = 200;
    // 辅助函数，用于生成心形路径上的点  
    function to(t) {
        var point = pointOnHeart(t); // 使用pointOnHeart函数获取心形上的点  
        point.x = // 调整点的x坐标位置  
            30 / 2 +
            (point.x * 30) / 350;
        point.y = // 调整点的y坐标位置  
            settings.particles.size / 2 -
            (point.y * settings.particles.size) / 350;
        return point; // 返回调整后的点  
    }

    // 开始绘制心形路径  
    context.beginPath();
    var t = -Math.PI; // 初始角度为-π  
    var point = to(t); // 获取初始点的位置  
    context.moveTo(point.x, point.y); // 将绘制起始点移动到该位置  

    let first = true;
    let textPoint = { x: 0, y: 0 };
    //context.fillText('心形上的文本', point.x, point.y); // 在指定位置添加文本  
    while (t < Math.PI) { // 当角度小于π时，继续绘制心形路径  
        console.log('p', point);
        t += 0.01; // 以小的增量更新角度  
        let beforePoint = point;

        point = to(t); // 获取当前角度下的点位置  
        if (point.x > beforePoint.x && first) {
            first = false;
            textPoint = point;

        }


        context.lineTo(point.x, point.y); // 从当前点到该点绘制直线  
    }
    context.closePath(); // 关闭路径  

    // 设置填充颜色为红色  
    context.fillStyle = "#f00";
    context.fill(); // 填充路径内部颜色  

    function pointOnHeart(t) {
        return new Point(
            160 * Math.pow(Math.sin(t), 3),
            130 * Math.cos(t) -
            50 * Math.cos(2 * t) -
            20 * Math.cos(3 * t) -
            10 * Math.cos(4 * t) +
            25
        );
    }



</script>

</html>